<template>
  <div class="banner-bottom" >
    <span class="one">{{day}}</span>
    <label class="tian">天</label>
    <span class="two">{{hour}}</span>
    <label class="shi">时</label>
    <span class="three">{{minute}}</span>
    <label class="fen">分</label>
    {{second}}
  </div>
</template>

<script>
  export default {
    props: {
      date: {
        type: Number,
        default: new Date().getTime()/1000,
      }
    },
    data () {
      return {
        day:'0',
        hour: '00',
        minute: '00',
        second: '00',
        count: (this.date*1000) - (new Date().getTime()),
        interval: null,
      }
    },
    methods: {
      start () {
        this.interval = setInterval(() => {
          this.count = (this.date*1000) - (new Date().getTime())
          this.count = this.count - 1000
          if (this.count <= 0) {
            console.log('超过了活动时间')
            this.second = '00'
            clearInterval(this.interval)
            this.timeDown()
            return
          }
          this.day = parseInt(this.count / (60 * 60 * 1000)/24)
//          if (this.day < 10) {
//            this.day = '0' + this.day
//          }
          this.hour = parseInt(this.count / (60 * 60 * 1000)) + ''
          if (this.hour < 10) {
            this.hour = '0' + this.hour
          }else if (this.hour >60 ){
            this.hour = parseInt(this.count / (60 * 60 * 1000)/60) + ''
            if (this.hour < 10){
              this.hour = '0' + this.hour
            }

          }
          let n = this.count % (60 * 60 * 1000)
          this.minute = parseInt(n / (60 * 1000)) + ''
          if (this.minute < 10) {
            this.minute = '0' + this.minute
          }
          let n2 = n % (60 * 1000)
          this.second = parseInt(n2 / 1000) + ''
          if (this.second < 10) {
            this.second = '0' + this.second
          }
        }, 1000)
      },
      timeDown () {
        this.$emit('timeDown')
      }
    },
    mounted () {
      this.start()
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .banner-bottom
    display box /* OLD - Android 4.4- */
    display -webkit-box
    display flex
    display -webkit-flex  /* OLD - iOS 6-, Safari 3.1-6 */
    -webkit-box-pack center  /* 09版 */
    -webkit-justify-content center  /* 12版 */
    justify-content center
    overflow hidden
    text-align center
    font-weight bold
    font-size .4rem
    color #ffffff
    span
      float left
      font-size .8266rem
      font-weight normal
      color #fffefe
    label
      float left
      font-size .56rem
      color #d92a2c
    .one
      transform: rotateZ(-10deg);
      -webkit-transform: rotateZ(-10deg);
    .tian
      transform: rotateZ(-10deg);
      -webkit-transform: rotateZ(-10deg);
    .two
      transform rotate(-4deg) translateY(-0.1333rem)
      -webkit-transform rotate(-4deg) translateY(-0.1333rem)
    .shi
      transform rotate(-4deg) translateY(-0.1333rem)
      -webkit-transform rotate(-4deg) translateY(-0.1333rem)
    .three
      transform rotate(-2deg) translateY(-0.2rem)
      -webkit-transform rotate(-2deg) translateY(-0.2rem)
    .fen
      transform translateY(-0.2rem)
      -webkit-transform translateY(-0.2rem)
</style>
